<template>
  <div class="loginWidget" :style="{ height: pageMinHeight + 'px' }">
    <div class="top-logo">
      <svg class="icon" aria-hidden="true" slot="image">
        <use xlink:href="#icon-xiaoyuanpaotui"></use>
      </svg>
    </div>
    <form action="POST" @submit.prevent="onSubmit" class="login">
      <van-cell-group>
        <van-field
          left-icon="phone"
          v-model="phone"
          required
          clearable
          center
          type="tel"
          maxlength="11"
          error-message
          :label="$t('phone')"
          @focus="onfocus"
          @blur="onblur"
          :placeholder="$t('phoneRequire')"
        ></van-field>
        <van-field
          v-model="password"
          @focus="onfocus"
          @blur="onblur"
          left-icon="lock"
          type="password"
          center
          autocomplete
          required
          maxlength="11"
          clearable
          :label="$t('password')"
          :placeholder="$t('loginPassword')"
        >
        </van-field>
      </van-cell-group>
      <div class="logIn">
        <van-button
          round
          type="info"
          size="large"
          @click="login"
          :disabled="canTouch"
          :loading="openLoading"
          loading-type="spinner"
          :loading-text="$t('waitingLogin')"
        >
          {{ $t("login") }}
        </van-button>
      </div>
    </form>
    <transition name="van-fade">
      <div class="footer" v-if="displayFooter">
        <router-link to="/forget">
          {{ $t("forgetPassword") }}
        </router-link>
        <router-link :to="{ name: 'register' }">
          {{ $t("registerUser") }}
        </router-link>
      </div>
    </transition>
  </div>
</template>

<script>
import { Icon, Field, CellGroup, Button } from 'vant';
import 'vant/lib/field/style/less';
import 'vant/lib/toast/style/less';

export default {
    name: 'login',
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Icon.name]: Icon,
        [Button.name]: Button
    },
    data () {
        return {
            phone: '', // 手机号码
            password: '', // 用户密码
            token: null, // 令牌
            pageMinHeight: 0,
            displayFooter: true,
            openLoading: false // 是否启用加载按钮
        };
    },
    methods: {
        login () {
            this.openLoading = true;
            let loginFlag = false; // 是否登录成功,默认登录失败
            const params = {
                phone: this.phone,
                password: this.password
            };
            this.$api.userApi
                .login(params)
                .then(res => {
                    localStorage.setItem('token', res.token);
                    localStorage.setItem('id', res.data._id);
                    loginFlag = true;
                })
                .catch(error => {
                    this.$util.failToast(error.message || this.$t('defaultError'));
                })
                .then(() => {
                    this.openLoading = false;
                    if (loginFlag) {
                        location.href = location.origin;
                    }
                });
        },
        onSubmit () {
            return false;
        },
        onfocus () {
            this.displayFooter = false;
        },
        onblur () {
            this.displayFooter = true;
        }
    },
    computed: {
        canTouch () {
            return !(this.phone.trim().length && this.password.trim().length);
        }
    },
    mounted () {
        this.pageMinHeight = this.$util.ScreenCanUseHeight();
    }
};
</script>

<style lang="less" scoped src="./less/login.less"></style>
